<script setup>
import { onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import axios from '@/http/index'
let route = useRoute()
let router = useRouter()
let id = ref(route.query.id)
let xq = ref([])
let value = ref(0)
const showShare = ref(false);
const options = [
    { name: '微信', icon: 'wechat' },
    { name: '朋友圈', icon: '/wechat-friend.png' },
    { name: '微博', icon: 'weibo' },
    { name: 'QQ', icon: 'qq' },
    { name: '空间', icon: '/QQ空间.png' },
];

const onSelect = (option) => {
    showToast(option.name);
    showShare.value = false;
    navigator.clipboard.writeText("http://localhost:5173" + window.location.pathname + `?id=${id.value}`)
    showToast('复制链接成功')
};
let a = ref(0)
onMounted(() => {
    axios.get(`/my/housexq?id=${id.value}`).then(
        res => {
            console.log(id.value);

            if (res.data.code == 200) {
                xq.value = res.data.data
            }
        }
    )
})
const onClickLeft = () => history.back();
</script>
<template>
    <div>
        <div v-for="item in xq" :key="item._id">
            <van-swipe :autoplay="2500" lazy-render :show-indicators="false" :duration="2000">
                <van-swipe-item v-for="image in item.img" :key="image">
                    <img style="width:100%;height:240px;" :src="image" />
                </van-swipe-item>
            </van-swipe>
            <div style="padding-left:10px;margin-top:20px;display:flex;position:relative;">
                <div>
                    <div style="display: flex;">
                        <h4 style="font-weight: bolder;font-size:15px;">{{ item.c_id.name[0] }}</h4>
                        <p style="font-weight:bolder;margin-top:-8px;font-size:20px;">&nbsp;.&nbsp;</p>
                        <h4 style="font-weight: bolder;font-size:15px;">{{ item.name }}</h4>
                    </div>
                    <h3 style="font-weight:bolder;font-size:17px;">精装高层电梯8楼/市中心/金鸡西路</h3>
                </div>
                <div @click="router.push('/homeinfo?id=' + item.u_id._id)">
                    <img style="width:60px;height:60px;border-radius:50%;position:absolute;right:20px;top:-5px;"
                        :src="item.u_id.landlord" />
                </div>
            </div>
            <div style="display:flex;flex-wrap:wrap;gap:15px;padding-left:20px;margin-top:20px;">
                <p :class="{ active: index == a, a: index != a }" v-for="(items, index) in item.houselabel"
                    :key="item._id">
                    {{ items }}</p>
            </div>
            <div style="border:1px solid #ddd;width:95%;margin:30px auto;padding:10px;box-shadow:5px 5px 5px #ddd;">
                <h2 style="font-weight:bolder;">详情</h2>
                <p style="margin-top:30px">{{ item.desc }}</p>
                <div style="display:flex;flex-wrap:wrap;gap:30px;padding-left:30px;margin-top:30px;">
                    <div style="display:flex;">
                        <img style="width:50px;height:40px;" src="/visitor.png" />
                        <p style="margin-left:20px;margin-top:20px;">{{ item.visitorNum }}位访客</p>
                    </div>
                    <div style="display:flex;">
                        <img style="width:50px;height:40px;" src="/bedroom.png" />
                        <p style="margin-left:20px;margin-top:20px;">{{ item.roomNum }}间卧室</p>
                    </div>
                    <div style="display:flex;">
                        <img style="width:50px;height:40px;" src="/bed.png" />
                        <p style="margin-left:20px;margin-top:20px;">&nbsp;&nbsp;{{ item.badNum }}张床&nbsp;</p>
                    </div>
                    <div style="display:flex;">
                        <img style="width:50px;height:40px;" src="/Toilet.png" />
                        <p style="margin-left:20px;margin-top:20px;">{{ item.toiletNum }}间卫生间</p>
                    </div>
                </div>
            </div>
            <div style="border:1px solid #ddd;width:95%;margin:30px auto;padding:10px;box-shadow:5px 5px 5px #ddd;">
                <h2 style="font-weight:bolder;">地点</h2>
                <h3 style="font-weight:bolder;margin-top:10px;">
                    {{ item.c_id.name[0] }}，{{ item.c_id.name[1] }}，{{ item.c_id.name[2] }}</h3>
                <p style="margin-top: 10px;padding-bottom:5px;border-bottom:5px solid #ddd;">{{ item.address }}</p>
                <h3 style="margin-top:10px;font-weight:bolder;">出行</h3>
                <img style="width:95%;margin-left:10px;" src="/1.png">
                <p style="margin-top:10px;">
                    <el-icon :size="30" style="vertical-align: middle;">
                        <MapLocation />
                    </el-icon>
                    准确位置将在预定后提供
                </p>
            </div>
            <h3 style="font-weight:bolder;padding-left:20px;margin-top:-10px;">价格明细:<font
                    style="font-size:21px;margin-left:30px;font-weight:bolder;color:orange;">￥{{ item.price }}/晚</font>
            </h3>
            <div style="display: flex;justify-content:space-around;margin-top:40px;margin-bottom:20px;">
                <van-button plain hairline type="primary">与房东沟通</van-button>
                <van-button type="primary" @click="$router.push(`/home/yd?id=${id}`)">立即预定</van-button>
            </div>
        </div>
        <p style="position: fixed;font-size:30px;left:0;top:0;color:#fff;" @click="onClickLeft">&lt;</p>
        <van-rate style="position: fixed;top:10px;right:60px;" v-model="value" icon="like" void-icon="like-o" :count="1"
            size="30" />
        <img style="width:30px;height:30px;position:fixed;top:10px;right:10px;" src="/share.png"
            @click="showShare = true" />
        <van-share-sheet v-model:show="showShare" title="立即分享给好友" :options="options" @select="onSelect" />
    </div>
</template>
<style scoped>
.a {
    background-color: rgb(228, 228, 228);
    padding: 5px 12px;
}

.active {
    background-color: rgb(91, 184, 204);
    color: #fff;
    padding: 5px 12px;
}
</style>